/*
 * @Date: 2023-08-03 09:43:40
 * @LastEditors: zhangsongwei
 * @LastEditTime: 2023-08-06 02:47:04
 * @FilePath: /z/src/pages/dashbord/info.tsx
 * @description:
 */
import React, { useEffect, useState } from "react";

import {
  Table,
  Tabs,
  Input,
  Select,
  Row,
  Col,
  Button,
  Divider,
  Modal,
} from "antd";

import { getInfo, updateInfo, addClassInfo } from "../../urls/p";

import { TableItemProps } from "./type";

const { confirm } = Modal;

// import './index.les
const { TabPane } = Tabs;

const { Option } = Select;

export default ({ onClick, subClassId }: TableItemProps) => {
  const [dataList, setDataList] = useState<any[]>([]);
  const [showData, setShowData] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState(1);

  const [addInfo, setAddInfo] = useState<any>({ subClassId });

  useEffect(() => {
    requestData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [subClassId]);

  const columns: any[] = [
    {
      title: "username",
      dataIndex: "username",
      key: "username",
      render: (t: any, r: any) => {
        return <div style={{ height: "30px" }}>{r.username}</div>;
        return (
          <div>
            {r.edit ? (
              <Input
                value={r.username}
                style={{ height: "100%", width: "80%" }}
                onChange={(e) => {
                  // TODO DEL
                  console.log("zz=del=info======>", e.target.value);
                  r.username = e.target.value;
                  setShowData(JSON.parse(JSON.stringify(showData)));
                }}
              />
            ) : (
              <div style={{ height: "30px" }}>{r.username}</div>
            )}
          </div>
        );
      },
    },
    {
      title: "operate",
      dataIndex: "operate",
      key: "operate",
      render: (t: any, r: any) => {
        return (
          <div>
            {r.edit ? (
              <Input
                value={r.operate}
                style={{ height: "100%", width: "80%" }}
                onChange={(e) => {
                  // TODO DEL
                  console.log("zz=del=info======>", e.target.value);
                  r.operate = e.target.value;
                  setShowData(JSON.parse(JSON.stringify(showData)));
                }}
              />
            ) : (
              <div style={{ height: "30px" }}>{r.operate}</div>
            )}
          </div>
        );
      },
    },

    {
      title: "status",
      dataIndex: "status",
      key: "status",
      render: (t: any, r: any) => {
        return (
          <div>
            {r.edit ? (
              <Input
                value={r.status}
                style={{ height: "100%", width: "80%" }}
                onChange={(e) => {
                  r.status = e.target.value;
                  setShowData(JSON.parse(JSON.stringify(showData)));
                }}
              />
            ) : (
              <div style={{ height: "30px" }}>{r.status}</div>
            )}
          </div>
        );
      },
    },
    {
      title: "updateTime",
      dataIndex: "updateTime",
      key: "updateTime",
      render: (t: any, r: any) => {
        return <div style={{ height: "30px" }}>{r.updateTime}</div>;
      },
    },

    {
      title: "Action",
      key: "action",
      render: (text: any, record: any) => (
        <>
          {record.edit ? (
            <div>
              <span
                style={{ color: "#1890ff", padding: "10px" }}
                onClick={async (e) => {
                  e.stopPropagation();

                  const { edit, updateTime, username, ...rest } = record;
                  const { code } = await updateInfo(rest);
                  if (code == 200) {
                    requestData();
                  }
                }}
              >
                保存
              </span>
              <Divider type="vertical" />
              <span
                style={{ color: "#1890ff", padding: "10px" }}
                onClick={(e) => {
                  e.stopPropagation();
                  showData.forEach((e) => {
                    e.edit = false;
                  });
                  const dataList1 = JSON.parse(JSON.stringify(dataList));
                  setShowData(
                    dataList1.slice((currentPage - 1) * 10, currentPage * 10)
                  );
                }}
              >
                取消
              </span>
            </div>
          ) : (
            <span
              style={{ color: "#1890ff", padding: "10px" }}
              onClick={(e) => {
                e.stopPropagation();
                showData.forEach((e) => {
                  if (e.edit) {
                    e.edit = false;
                  } else {
                    e.edit = e.username === record.username;
                  }
                });
                setShowData(JSON.parse(JSON.stringify(showData)));
              }}
            >
              编辑
            </span>
          )}
        </>
      ),
    },
  ];

  const classInfoView = () => {
    return (
      <div>
        <Row>
          <Col>userId:</Col>
          <Col>
            <Input
              onChange={(e) => {
                e.persist();
                setAddInfo((d: any) => {
                  // TODO DEL
                  console.log("zz=del=info======>", e.target.value);
                  d.userId = e.target.value;
                  return d;
                });
              }}
            />
          </Col>
        </Row>

        <Row>
          <Col>operate:</Col>
          <Col>
            <Input
              onChange={(e) => {
                e.persist();
                setAddInfo((d: any) => {
                  // TODO DEL
                  console.log("zz=del=info======>", e.target.value);
                  d.operate = e.target.value;
                  return d;
                });
              }}
            />
          </Col>
        </Row>
      </div>
    );
  };

  const showConfirm = () => {
    confirm({
      title: "add class",
      content: classInfoView(),
      onOk: async () => {
        const { userId, operate } = addInfo;
        if (!userId || !operate) {
        } else {
          const res = await addClassInfo(addInfo);
          const { code } = res;
          if (code == 200) {
            requestData();
          }
        }
      },
      onCancel() {
        setAddInfo({});
      },
    });
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const requestData = async () => {
    const res = await getInfo(subClassId);
    const res1 = JSON.parse(JSON.stringify(res));
    setDataList(res.info || []);
    setShowData(res1.info.slice(0, 10) || []);
  };

  const onChange = (pagination: any) => {
    const { current } = pagination;
    setCurrentPage(current);
    const dataList1 = JSON.parse(JSON.stringify(dataList));
    setShowData(dataList1.slice((current - 1) * 10, current * 10));
  };

  return (
    <div className="main-view">
      <Row gutter={[0, 40]}>
        <Col span={2} style={{}}>
          <Button onClick={showConfirm}>+</Button>
        </Col>
      </Row>
      <Row>
        <Col>
          <Table
            columns={columns}
            dataSource={showData}
            pagination={{ total: dataList.length, pageSize: 10 }}
            onChange={onChange}
            onRowClick={(record) => {
              if (record.edit) return;
              onClick && onClick(record);
            }}
          />
        </Col>
      </Row>
    </div>
  );
};
